var ProcedureItem = function(){
  var template = /* html */`
    <div class="procedure-item" v-loading.fullscreen.lock="loading">
      <div class="procedure-item-workshop">
        <el-tag effect="dark" type="warning">{{workshopProcedure.workshopName}}</el-tag>
      </div>
      <div class="procedure-item-content">
        <template v-for="pro in workshopProcedure.processList">
          <el-tag :key="pro.id" effect="dark" type="success" :closable="isRemove" @close="removeProcess(pro)">
            {{pro.processName}}
          </el-tag>
        </template>
      </div>
    </div>
  `;

  return {
    props: {
      workshopProcedure: {
        type: Object,
        required: true
      },
      order: {
        type: Object,
        required: true
      },
      isRemove: {
        type: Boolean,
        default: false
      }
    },

    data:function(){
      return {
        loading: false
      };
    },

    methods:{
      removeProcess:function(pro){
        var procedureId = pro.id;
        var tempId = this.order.id;

        this.loading = true;
        var self = this;
        ajaxRequest('orderProcedureTemplate/removeTemplateProcedure',{
          tempId:tempId,
          procedureId:procedureId
        }).then(function(){
          self.loading = false;
          self.toRemoveProcess(pro);
        }).catch(function(){
          self.loading = false;
        });
      },

      toRemoveProcess:function(pro){
        var processList = this.workshopProcedure.processList;
        var index = _.findIndex(processList, {
          id: pro.id
        });
        if (index > -1) {
          processList.splice(index, 1);
        }
      }
    },

    template:template
  };
}();